import { View, Text, StatusBar, Pressable, Alert, ToastAndroid, Platform } from 'react-native'
import React, { useState } from 'react'
import { gss, zhSpacingColBase, zhThemeColor,successColor } from '../global'
import { Image } from 'react-native'
import { TextInput } from 'react-native'
//必须事先导入未来所有要在APP中使用的图片
import eyeClose from '../assets/img/eye-close.png'
import eyeOpen from '../assets/img/eye-open.png'
import { userLogin } from '../service'
import AsyncStorage from '@react-native-async-storage/async-storage'
import {  useRouter } from 'expo-router'
import { RootSiblingParent } from 'react-native-root-siblings';
import Toast from 'react-native-root-toast';


//Expo Router的路由系统中页面组件名与路由地址无关，且可以任意命名，甚至无名
export default function Login() {
  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('userToken');
      if (value !== null) {
        router.push('/tabs/home')
      }
    } catch (e) {
      // error reading value
    }
  };
  getData()
  // 注意:Hooks函数只能在最顶层调用
  let router = useRouter()

  //状态变量 —— 提交按钮的背景颜色： #090 => #080 => #090
  let [btnBgColor, setBtnBgColor] = useState(successColor)
  //状态变量 —— 保存用户输入的手机号
  let [phone, setPhone] = useState('13501234567')
  //状态变量 —— 保存用户输入的登录密码
  let [pwd, setPwd]  = useState('123456')
  //状态变量 —— 是否隐藏密码输入框中的密码        
  let [hidePwd, setHidePwd]  = useState(true)

  //执行登录操作
  let doLogin = async ()=>{
    //1.判断电话号码输入是否合法
    let p1 = phone.trim()
    if(p1.length===0){
      Alert.alert(                      //弹出警告框
        '错误',                         //标题 
        '手机号不能为空！' ,              //内容
        [                               //按钮组
          {text:'确定', onPress:()=>{}},
          //{text:'取消', onPress:()=>{}},
        ])
      return
    }
    if(!/^1[3-9]\d{9}$/.test(p1)){      //使用正则表达式验证手机号码格式
      Alert.alert('错误','手机号码格式错误！',[{text:'确定'}])
      return
    }
    //2.判断密码输入是否合法
    let p2 = pwd.trim()
    if(p2.length<6 || p2.length>36){
      Alert.alert('错误','密码长度非法！', [{text:'确定'}])
      return
    }
    //3.调用服务器接口，进行登录验证
    let data = await userLogin(p1, p2)
    if(data.code === 2000){   //登录成功
      //弹出一个吐司对话框，提示：欢迎回来
      console.log(Platform.OS)
      if(Platform.OS == 'ios'){
        Toast.show('登录成功',{
          duration: Toast.durations.LONG,
          position: Toast.positions.CENTER,
        })
      }else{
        ToastAndroid.show(
          '登录成功',            //吐司消息
          ToastAndroid.LONG    //吐司对话框持续时长
        )
      }      
      //console.log('SHORT: ', ToastAndroid.SHORT)  //0
      //console.log('LONG: ', ToastAndroid.LONG)    //1
      //在客户端缓存中保存当前用户的身份令牌，类似于浏览器中的localStorage
      console.log(data.token)
      AsyncStorage.setItem('userToken', data.token)
      //跳转到首页去
      router.push('/tabs/home')
    }else {                   //登录失败
      //弹性一个模态警告框，提示错误原因
      Alert.alert(
        '失败',
        '登录失败！服务器返回错误消息：'+data.msg,
        [{text: '确定'}]
      )
    }
  }
  return (
    <RootSiblingParent>
      <View>
        {/* F1: 状态栏 */}
        <StatusBar backgroundColor={zhThemeColor} barStyle="light-content"/>
        {/* F2: LOGO图 */}
        <Image style={gss.logo} source={require('../assets/img/logo.png')}/>
        {/* F3: 手机号输入框组 */}
        <View style={gss.inputGroup}>
          {/* 注意：RN的输入框只能通过“受控组件”方式读取数据，且获取最新的输入需要监控是onChangeText事件，不是onChange！！！ */}
          <TextInput value={phone} onChangeText={txt=>setPhone(txt)} style={gss.input} placeholder='请输入手机号码'/>
          <Image style={[gss.inputIcon, gss.left]} source={require('../assets/img/cellphone.png')}/>
          {/* 提示：Image组件没有“Press”相关事件 */}
          <Pressable style={[gss.inputIcon, gss.right]} onPress={_=>setPhone('')}>
            <Image style={[gss.inputIcon, {top:0}]} source={require('../assets/img/clear.png')}/>
          </Pressable>
        </View>
        {/* F4: 密码输入框组 */}
        <View style={gss.inputGroup}>
          {/* secureTextEntry：是否采用“安全的文本输入”，即密码形式 */}
          <TextInput value={pwd} onChangeText={txt=>setPwd(txt)} secureTextEntry={hidePwd} style={gss.input} placeholder='请输入登录密码'/>
          <Image style={[gss.inputIcon, gss.left]} source={require('../assets/img/lock.png')}/>
          <Pressable style={[gss.inputIcon, gss.right, {width:25, height:25, top:3}]} onPress={_=>setHidePwd(!hidePwd)}>
            <Image style={[gss.inputIcon,{width:25, height:25}]} source={hidePwd ? eyeClose : eyeOpen}/>
          </Pressable>
        </View>
        {/* F5: 提交按钮 */}
        {/* title：用于指定按钮上的文字 */}
        {/* 提示：谷歌为了保留按钮的水波纹效果，禁止修改样式，取消了style属性，一般不推荐使用该组件 */}
        {/* <Button title='立即登录' /> */}
        {/* 通过使用Text模拟按钮效果 */}
        {/* onPressIn：开始按下事件,Text的onPressIn必须和onPress组合使用才有效 */}
        {/* onPressOut：按下结束事件 */}
        {/* Pressable组件：用于包裹其它组件，为它们增加Press相关的事件 —— Pressable组件的onPressIn无需和onPress组合使用 */}
        <Pressable onPress={doLogin} onPressIn={_=>setBtnBgColor('#080')} onPressOut={_=>setBtnBgColor(zhThemeColor)}>
          <Text style={[gss.btn, {backgroundColor:btnBgColor}]}>立即登录</Text>
        </Pressable>
      </View>
    </RootSiblingParent>
  )
}